<template>
<div>
  <el-button type="text" @click="getHeatLoss">新增热损耗装置</el-button>
  <el-table :data="pageDevice" border style="width: 100%" size="mini">
    <el-table-column prop="id" label="序号" align="center" width="60"></el-table-column>
    <el-table-column prop="group" label="组件群" align="center" width="200"></el-table-column>
    <el-table-column prop="device" label="装置" align="center" width="220"></el-table-column>
    <el-table-column prop="num" label="数量" width="160" align="center"></el-table-column>
    <el-table-column prop="heat_before" label="热损耗" width="160" align="center"></el-table-column>
    <el-table-column prop="factor" label="同时产生因素" width="120" align="center"></el-table-column>
    <el-table-column prop="heat_after" label="符合W" width="120" align="center"></el-table-column>
    <el-table-column label="操作" width="180" align="center">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="updateDevice(scope.row)"></el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="deleteDevice(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
      <el-button type="primary" icon="el-icon-check" size="mini" @click="submitDeviceData" style="margin-left: 1100px;">提交数据</el-button>
 <!-- 分页 -->
      <el-row style="margin-top: 20px">
        <!-- <el-col :span="8" style="text-align: left">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteStudents()"
          >
            批量删除</el-button
          >
        </el-col> -->
        <el-col :span="16" style="text-align: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentpage"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
  <el-dialog title="热损耗计算" class="ec-dialog" :visible.sync="dialogVisible" width="70%">
   <el-form label-position="left" :model="deviceForm" :inline="true">
     <el-form-item label="热损耗直接输入" prop="heatLoss"  style="margin-left: 10px;">
       <el-input class="bbb" v-model="deviceForm.heatLoss" :disabled="false"></el-input>W
     </el-form-item>
     </br>
     <h3 style="margin-top: auto: ;">温度实际值输入</h3>
     <el-form-item label="外部的(测量的)" prop="tempertureOutside" style="margin-left: 10px;">
       <el-input class="bbb" v-model="deviceForm.tempertureOutside" :disabled="false"></el-input>℃
     </el-form-item>
     <el-form-item label="内部的(测量的)" prop="tempertureInside" style="margin-left: 200px">
       <el-input class="bbb" v-model="deviceForm.tempertureInside" :disabled="false"></el-input>℃
     </el-form-item>
     </br>
     <h3 style="margin-top: auto;">装置列表</h3>
       <el-form-item label="制造商" prop="manufacturer">
         <el-input class="bbb" v-model="deviceForm.manufacturer" :disabled="false"></el-input>
       </el-form-item>
       </br>
       <el-form-item label="组件群" prop="componentGroup" >
         <el-select  v-model="deviceForm.componentGroup"   placeholder="请选择组件群" @change="getComponentGroup">
           <el-option  v-for="(item, index) in componentGroups"  :key="index"  :label="item"  :value="item">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="同时产生因素" prop="factor" style="margin-left: 200px">
         <el-input class="bbb" v-model="deviceForm.factor" :disabled="false" @change="sendDeviceData"></el-input>%
       </el-form-item>
       <el-form-item label="符合" prop="initHeatLoss" style="margin-left: 10px;">
         <el-input class="bbb" v-model="deviceForm.initHeatLoss" :disabled="true"></el-input>W
       </el-form-item>
       </br>
       <el-form-item label="装置" prop="deviceName" >
         <el-select  v-model="deviceForm.deviceName" style="margin-left: 14px;" placeholder="请选择组件群"  @change="sendDeviceData">
           <el-option  v-for="(item, index) in devices"  :key="index"  :label="item"  :value="item">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="数量" prop="num" style="margin-left: 200px">
         <template>
           <el-input-number v-model="deviceForm.num" controls-position="right" @change="addNum" :min="0" ></el-input-number>
         </template>
       </el-form-item>
   </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitDeviceForm('deviceForm')">增 加</el-button>
    <el-button type="danger" @click="closeDialogForm('deviceForm')">取 消</el-button>
  </span>
</el-dialog>
  </el-row>
</div>
</template>
<script>
  export default {
    data() {
      return {
        pageAllDevice:[], //全部装置数据
        pageDevice:[], //当前页展示装置数据
        dialogVisible: false,
        //====分页相关的变量====
        total: 0, //数据的总行数
        currentpage: 1, //当前的所在的页
        pagesize: 10, //每页显示多少行数据
        deviceForm:{
          heatloss:"", //直接输入的热损耗
          deviceName:"",//装置名
          factor:100, //同时产生因素
          tempertureInside:"", //内部温度
          tempertureOutside:"", //外部温度
          componentGroup:"", //组件群
          manufacturer:"", //制造商
          initHeatLoss:"", //符合后热损耗
          beforeHeatLoss:"",//符合前热损耗
          num:1,  //
        },
        tempertureInside2:"",
        tempertureOutside2:"",
        heatLoss2:"",
        manufacturer2:"",
        heatDeviceForm:[],
        isEdit: false,
        componentGroups:[],
        manufacturers:[],
        devices:[],
        devicesDic:{},
      };
    },
    methods: {
      getHeatLoss(){
        this.dialogVisible=true
      },
      //提交数据
      submitDeviceData(){
        this.$http.post("/submitDeviceData/",{heatloss:this.deviceForm.heatloss})
        .then((res)=>{
          if(res.data.code===1){
            this.pageAllDevice=res.data.data
                //获取返回记录的总行数
                this.total = res.data.data.length;
                //获取当前页的数据
                this.getPagedevice();
                //提示：
                this.$message({
                  message: "数据加载成功！",
                  type: "success",
                });
              }else{
                this.$message.error(res.data.msg)
              }
            })
            .catch((err)=>{
              console.log(err)
            })
        location.reload()
      },
      //鼠标离开输入框就计算
      sendDeviceData(){
        this.$http.post("/sendDeviceData/",{deviceName:this.deviceForm.deviceName})
        .then((res)=>{
          if(res.data.code===1){
            this.deviceForm.beforeHeatLoss=res.data.data[0]['value']
            this.deviceForm.initHeatLoss=(this.deviceForm.beforeHeatLoss)*(this.deviceForm.factor/100)*this.deviceForm.num
            this.deviceForm.initHeatLoss.toPrecision(5)
          }else{
             this.$message.error(res.data.msg)
          }
        })
        .catch((err)=>{
          console.log(err)
        })
      },
      //获取所有装置
      getHeatDeviceData(){
        //获取所有装置信息
        this.$http.get("/getHeatDevice/")
        .then((res)=>{
          if(res.data.code===1){
            this.pageAllDevice=res.data.data
            //获取返回记录的总行数
            this.total = res.data.data.length;
            //获取当前页的数据
            this.getPagedevice();
            //提示：
            this.$message({
              message: "数据加载成功！",
              type: "success",
            });
          }else{
            this.$message.error(res.data.msg)
          }
        })
        .catch((err)=>{
          console.log(err)
        })
      },
      //获取当前页的配电柜信息
      getPagedevice(){
        //清空pageec中的数据
        this.pageDevice = [];
        //获得当前页的数据
        for (
          let i = (this.currentpage - 1) * this.pagesize;
          i < this.total;
          i++
        ) {
          //遍历数据添加到pageec中
          this.pageDevice.push(this.pageAllDevice[i]);
          //判断是否达到一页的要求
          if (this.pageDevice.length === this.pagesize) break;
        }
      },
      updateDevice(row){
        console.log("hello")
        //弹出表单
        this.dialogVisible = true;
        //修改isEdit的值
        this.isEdit = true;
        console.log(JSON.stringify(row))
        //深拷贝方法：
        this.deviceForm.deviceName=row.device
        this.deviceForm.num=row.num
        this.deviceForm.factor=row.factor
        this.deviceForm.initHeatLoss=row.heat_after
        this.deviceForm.beforeHeatLoss=row.heat_before
        this.deviceForm.componentGroup=row.group
        this.deviceForm.manufacturer=this.manufacturer2
        this.deviceForm.tempertureInside=this.tempertureInside2
        this.deviceForm.tempertureOutside=this.tempertureOutside2
        this.deviceForm.heatloss=this.heatLoss2
        // this.deviceForm = JSON.parse(JSON.stringify(row));

      },
      deleteDevice(row){
       //等待确认
         this.$confirm("是否确认删除所选配电柜信息？", "提示", {
           confirmButtonText: "确定删除",
           cancelButtonText: "取消",
           type: "warning",
         })
           .then(() => {
             //确认删除响应事件
             //调用后端接口
             this.$http
               .post("deleteDevice/", { id: row.id })
               .then((res) => {
                 if (res.data.code === 1) {
                   //获取项目选择的配电柜信息
                   this.pageAllDevice = res.data.data;
                   //获取记录数
                   this.total = res.data.data.length;
                   //分页
                   this.getPagedevice();
                   location.reload()
                   //提示
                   this.$message({
                     message: "删除成功！",
                     type: "success",
                   });
                 } else {
                   this.$message.error(res.data.msg);
                 }
               });
           })
           .catch(() => {
             this.$message({
               type: "info",
               message: "已取消删除",
             });
           });
       },
      addNum(value){
        console.log(value)
        this.sendDeviceData()
      },
      //获得装置名
      getComponentGroup(){
        //清空组件群选择
        this.deviceForm.deviceName = "";
        this.$http
          .get("/getComponentGroup/")
          .then((res) => {
            if (res.data.code === 1) {
              this.devicesDic = res.data.data1; //接受带有尺寸和型号的字典数据 q
              this.componentGroups = res.data.data2; //接受型号数据 dic1
              console.log(this.componentGroups)
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            //请求失败后执行的函数
            console.log(err);
          });
        // 遍历配电柜型号下拉选项数组
        for (const k in this.componentGroups) {
          // 配电柜型号内容 是否等于 配电柜型号的下拉选择数组中的某一项
          if (this.deviceForm.componentGroup === this.componentGroups[k]) {
            this.devices  = this.devicesDic[this.deviceForm.componentGroup];
          }
        }
        // console.log(this.deviceForm)
        // console.log(this.componentGroups)
      },

      closeDialogForm(deviceForm){
        this.deviceForm.id=" ",
        this.deviceForm.name=" ",
        this.deviceForm.componentGroup=" ",
        this.deviceForm.manufacturer=" ",
        this.deviceForm.num=" ",
        this.dialogVisible = false
        this.isEdit = false
      },
      submitDeviceForm(deviceForm){
        //执行添加或者修改？
        if (this.isEdit) {
          //修改
          this.submitUpdateDevice();
        } else {
          //添加
          this.submitAddDevice();
        }
      },
      //归零
      toZero(){
        this.tempertureInside2=this.deviceForm.tempertureInside
        this.tempertureOutside2=this.deviceForm.tempertureOutside
        this.manufacturer2=this.deviceForm.manufacturer
        this.heatLoss2=this.deviceForm.heatLoss
        location.reload()
      },
      //添加操作
      submitAddDevice(){
        //执行Axios请求
        this.$http
          .post("/submitDevice/", this.deviceForm)
          .then((res) => {
            //执行成功
            if (res.data.code === 1) {
              //获取项目选择的配电柜信息
              this.pageAllDevice = res.data.data;
              //获取记录条数
              this.total = res.data.data.length;
              //获取分页信息
              this.getPagedevice();
              //提示：
              this.$message({
                message: "数据添加成功！",
                type: "success",
              });
              //关闭窗体
              this.toZero()
              this.closeDialogForm("deviceForm");
            } else {
              //失败的提示！
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            //执行失败
            console.log(err);
            this.$message.error("获取后端查询结果出现异常！");
          });
      },
      //修改操作
      submitUpdateDevice(){
      // //执行Axios请求
      // this.$http
      //   .post("/updateDevice/", that.Ecform)
      //   .then((res) => {
      //     //执行成功
      //     if (res.data.code === 1) {
      //       //获取项目选择的配电柜的信息
      //       this.ec = res.data.data;
      //       //获取记录条数
      //       this.total = res.data.data.length;
      //       //获取分页信息
      //       this.getPageEc();
      //       //提示：
      //       this.$message({
      //         message: "配电柜数据修改成功！",
      //         type: "success",
      //       });
      //       //关闭窗体
      //       this.closeDialogForm("ECform");
      //     } else {
      //       //失败的提示！
      //       this.$message.error(res.data.msg);
      //     }
      //   })
      //   .catch((err) => {
      //     //执行失败
      //     console.log(err);
      //     this.$message.error("修改时获取后端查询结果出现异常！");
      //   });
      },
      handleSizeChange(size) {
        //修改当前每页数据行数
        this.pagesize = size;
        //数据重新分页
        getPageDevice();
      },
      //调整当前的页码
      handleCurrentChange(pageNumber) {
        //修改当前的页码
        this.currentpage = pageNumber;
        //数据重新分页
        this.getPageDevice();
      },
      },
      mounted() {
        // this.getManufacturerData()(); //加载生产商菜单
        // this.getEc(); //加载该项目所选择的的配电柜信息
        this.getComponentGroup(),
        this.getHeatDeviceData()
      },
  }
</script>
<style lang="less" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}

.el-main {
  background-color: #e9edf3;
  color: #333;
  // text-align: center;
  // line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

//选择框图片大小设置
.radio_container {
  margin-left: 10px;
  img {
    height: 15px;
    width: 20px;
  }
}

//设置对话框中input的样式
.bbb {
  width: 120px;
}
</style>

<style lang="less">
.ec-dialog {
  .el-dialog__header {
    background: hsl(199, 58%, 75%);
  }

  /* 弹出层设置背景色 底部*/

  .el-dialog__footer {
    background-color: hsl(199, 58%, 75%) !important;
  }
  /* 弹出层设置背景色 身体部份*/
  .el-dialog__body {
    background: linear-gradient(to bottom, hsl(199, 58%, 75%));
    background-size: 100%, 100%;
  }
}
</style>
